<template>
  <div class="policy-container">
    <div class="header"><h1>贵阳（贵安）退役军人就业服务平台</h1></div>
    <div style="padding: 10px">
      <!-- 主要政策分类 -->
      <div class="policy-grid">
        <el-row :gutter="12">
          <el-col :span="8" v-for="(item, index) in mainPolicies" :key="index">
            <el-card
              shadow="hover"
              class="policy-card"
              @click="handleCardClick(item)"
            >
              <div class="card-content">
                <el-icon :size="30" class="policy-icon">
                  <component :is="item.icon" />
                </el-icon>
                <span>{{ item.title }}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 其他分类 -->
      <div class="other-section">
        <h2>其他分类</h2>
        <div class="articles-list">
          <van-list
            v-model:loading="pageParams.loading"
            v-model:error="pageParams.error"
            :finished="pageParams.finished"
            :finished-text="pageParams.finishedText"
            error-text="请求失败，点击重新加载"
            @load="onLoad"
          >
            <ListItem
              v-for="(item, index) in listData"
              :key="index"
              :title="item.title"
              :label="item.dateandtime"
              :fid="item.Fid"
              :typeid="typeid"
              @click="handleClick(item)"
            />
          </van-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import {
  User,
  Briefcase,
  School,
  Document,
  Discount,
  Collection,
} from "@element-plus/icons-vue";
import { List } from "vant";
import ListItem from "./components/ListItem.vue";
import { getregulationsList } from "@/api/index";
import { useRouter } from "vue-router";
export default {
  components: {
    ListItem,
    [List.name]: List,
  },
  setup() {
    const router = useRouter();
    const pageParams = ref({
      loading: false,
      finished: false,
      error: false,
      page: 1,
      pageSize: 10,
      finishedText: "没有更多了",
    });
    const mainPolicies = ref([
      { title: "就业政策", icon: User, url: "/article/Policy" },
      { title: "创业政策", icon: Briefcase, url: "/article/Entrepreneurship" },
      { title: "培训政策", icon: School, url: "/article/Training" },
      { title: "学历提升", icon: Document, url: "/article/Improve" },
      { title: "税收优惠", icon: Discount, url: "/article/TaxIncentives" },
      { title: "政策原文", icon: Collection, url: "/article/PolicyText" },
    ]);
    const listData = ref([]);
    let typeid = "";
    // 获取列表
    const getData = async () => {
      let params = {
        page: pageParams.value.page - 1,
        page_size: 10,
        typeid: "54",
      };
      pageParams.value.loading = true;
      try {
        let { data, pageparam } = await getregulationsList(params);
        console.log("data",data)
        pageParams.value.page++;
        pageParams.value.loading = false;
        data = data.map((item) => {
          item.dateandtime = item.dateandtime && item.dateandtime.slice(0, 10);
          return item;
        });
        listData.value.push(...data);

        if (!data.length && pageParams.value.page == 1) {
          console.log(11)
          pageParams.value.finishedText = "很抱歉，未找到符合要求的信息！";
        } else {
          console.log(22)
          pageParams.value.finishedText = "没有更多了";
        }
        if (pageParams.value.pageSize > data.length) {
          pageParams.value.finished = true;
        }
      } catch (error) {
        pageParams.value.error = true;
        console.error(error);
      }
    };

    onMounted(() => {
      getData();
    });
    const handleClick = (item) => {
      router.push({ path: "/article/detail", query: { fid: item.Fid } });
    };
    const handleCardClick = (item) => {
      const url = item.url;
      if (url) {
        if (url.includes("http")) {
          // location.href = url;
          window.open(url, "_blank");
        } else {
          router.push(url);
        }
      }
    };
    return {
      mainPolicies,
      pageParams,
      listData,
      handleClick,
      handleCardClick,
    };
  },
};
</script>

<style scoped>
.header {
    background-color: #1e88e5;
    color: #fff;
    padding: .4rem .53333rem;
    text-align: center;
    box-shadow: 0 2px 4px #0000001a;
}
.header h1 {
    margin: 0;
    font-size: .48rem;
}
.policy-container {
  max-width: 600px;
  margin: 0 auto;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 5px;
}

.page-header p {
  font-size: 14px;
  color: #909399;
}

.policy-grid {
  margin-bottom: 20px;
}

.policy-card {
  margin-bottom: 12px;
  text-align: center;
  cursor: pointer;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.policy-icon {
  margin-bottom: 8px;
  color: #409eff;
}

.other-section {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.other-section h2 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #303133;
}

.policy-content {
  padding: 10px;
  font-size: 14px;
  color: #606266;
}

.apply-btn {
  margin-top: 15px;
  width: 100%;
}

.footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .policy-card {
    height: 80px;
  }

  .policy-icon {
    font-size: 24px;
  }
}
</style>